<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01_CSS显示模式</title>
        <style>
            div {
                width:100px;
                height:100px;
                border:5px solid #f00;
                /* 块级元素 默认(display显示模式: block竖着排 不写也默认有)竖着排 且可以设置宽高 */
                display: block;
            }
            span {
                background-color: #ff0;
                width:200px;
                height: 100px;
                /* 行内元素 默认(display显示模式: inline横着排 不写也默认有)横着排 不可以可以设置宽高 即使设置也不会显示出来  */
                display: inline;
                display:block; /* 可以切换元素显示模式 切换后 前面设置得宽高能显示出来 */
            }
            input,button {
                /* 行内块元素(我们目前常见的只有input button) 既能横着排 又能设置宽高 */
                display: inline-block;
                width:100px;
                height:100px;
            }
            .d2:hover {
                /* 悬停时元素显示模式位消失，且释放占据的文档流空间 */
                display:none;
            }




        </style>

    </head>
    <body>
        <div class="d1">11</div>
        <div class="d2">22</div>
        <div class="d3">33</div>
        <hr>
        <span>123456789</span>
        <span>123456789</span>
        <span>123456789</span>
        <hr>
        <input type="text">
        <input type="text">
        <input type="text">
        <button>按钮</button>






    </body>
</html>